<template>
  <div class="cloud_shop_member">
    <!-- is_base是实习店长 -->
    <template v-if="otherInfo.is_base == 1">
      <div
        class="Sales_assessment"
        v-if="otherInfo.wechat_follow == 1 && (guide_show_status == 1 ? otherInfo.guide_status == 2 : true) && otherInfo.first_order_status == 1 && otherInfo.check_list.length > 0"
      >
        <template v-for="(item, index) in otherInfo.check_list">
          <div class="Sales_assessment_b" :key="index">
            <div class="Sales_assessment_b_t">
              <div class="Sales_assessment_b_t_l">{{ item.desc }}</div>
              <div class="Sales_assessment_b_t_r">已完成 {{ item.actual }}/{{ item.expect }}</div>
            </div>
            <div class="Sales_assessment_b_line">
              <div class="schedule" :style="{ width: schedule(item.actual, item.expect) }"></div>
            </div>
          </div>
        </template>
      </div>
      <div
        class="Internship_Guide"
        v-if="otherInfo.is_base == 1 && (otherInfo.wechat_follow != 1 || (guide_show_status == 1 ? otherInfo.guide_status != 2 : false) || otherInfo.first_order_status != 1)"
      >
        <div class="txt">实习店长任务指引</div>
        <template v-if="first_order_check_time_check">
          <div class="guidePoint">{{ daysUntilDeadline }}天内分享1单即可完成任务</div>
          <div class="guidePoint_time">
            <span class="guidePoint_time_txt">还剩</span>
            <van-count-down :time="check_time">
              <template #default="timeData">
                <span class="block cr">{{ timeData.days }}</span>
                <span class="colon">天</span>
                <span class="block cr">{{ set_zone(timeData.hours) }}</span>
                <span class="colon">时</span>
                <span class="block cr">{{ set_zone(timeData.minutes) }}</span>
                <span class="colon">分</span>
                <span class="block cr">{{ set_zone(timeData.seconds) }}</span>
                <span class="colon">秒</span>
              </template>
            </van-count-down>
          </div>
        </template>
        <div class="task">
          <div class="taskTag" :class="{ selectTask: otherInfo.wechat_follow == 1 }">
            <div class="rightIcon"><i class="iconfont icon-icon_select1"></i></div>
            加导师/公众号
          </div>
          <div class="taskTag" :class="{ selectTask: otherInfo.guide_status == 2 }" v-if="guide_show_status == 1">
            <div class="rightIcon"><i class="iconfont icon-icon_select1"></i></div>
            速成课
          </div>
          <div class="taskTag" :class="{ selectTask: otherInfo.first_order_status == 1 }">
            <div class="rightIcon"><i class="iconfont icon-icon_select1"></i></div>
            分享一单点亮
          </div>
        </div>
        <div class="btn">
          <template v-if="otherInfo.wechat_follow == 0">
            <div class="btn_c btn_b" @click="sharePoster">{{ otherInfo.wechat_follow == 1 ? "已关注公众号" : "去关注公众号" }}</div>
            <div class="btn_c" @click="todiyBg">{{ otherInfo.wechat_follow == 1 ? "已添加导师" : "去添加导师" }}</div>
          </template>
          <template v-else-if="(otherInfo.guide_status == 0 || otherInfo.guide_status == 1) && guide_show_status == 1">
            <div class="btn_c btn_b" v-if="otherInfo.guide_status == 0" @click="to_internship_Guide">学习开店速成课</div>
            <div class="btn_c btn_b" v-if="otherInfo.guide_status == 1" @click="guideFinish">已完成速成课</div>
            <div class="btn_c" @click="to_internship_Guide">再学一遍</div>
          </template>
          <template v-if="otherInfo.first_order_status == 0 && otherInfo.wechat_follow == 1 && (guide_show_status == 0 ? true : otherInfo.guide_status == 2)">
            <div class="btn_c" @click="toOpenOrder">开单专区</div>
          </template>
        </div>
      </div>
    </template>
    <template v-if="otherInfo.is_base == 0 && otherInfo.check_list.length > 0">
      <div class="Sales_assessment">
        <template v-for="(item, index) in otherInfo.check_list">
          <div class="Sales_assessment_b" :key="index">
            <div class="Sales_assessment_b_t">
              <div class="Sales_assessment_b_t_l">{{ item.desc }}</div>
              <div class="Sales_assessment_b_t_r">已完成 {{ item.actual }}/{{ item.expect }}</div>
            </div>
            <div class="Sales_assessment_b_line">
              <div class="schedule" :style="{ width: schedule(item.actual, item.expect) }"></div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: ["otherInfo", "guide_show_status"],
  data() {
    return {
      nowTime: parseInt(new Date().getTime() / 1000)
    };
  },
  methods: {
    toOpenOrder() {
      this.$router.push(this.fun.getUrl("billing_Zone", {}));
    },
    to_internship_Guide() {
      this.$router.push(this.fun.getUrl("internship_Guide", {}));
    },
    // 公众号关注海报
    sharePoster() {
      this.$emit("show_poster");
    },
    // 后台上传的自定义图片路由未定义
    todiyBg() {
      if (otherInfo.wechat_follow == 1) return;
      this.$router.push(this.fun.getUrl("cloud_shop_diyPage", {}));
    },
    async guideFinish() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.guide.guideFinish", {}, "");
      if (result) {
        this.$toast(msg);
        this.$emit("update_guide_status");
      } else {
        this.$toast(msg);
      }
    }
  },
  mounted() {},
  computed: {
    schedule(actual, expect) {
      return function(actual, expect) {
        let percentage = (Number(actual) / Number(expect)) * 100;
        if (percentage >= 100) {
          percentage = 100;
        }
        console.log(percentage + "%");
        return `${percentage.toFixed(2)}%`; // 返回精确到小数点后两位的百分比
      };
    },
    set_zone(key) {
      return function(key) {
        if (key < 10) {
          return "0" + key;
        }
        return key;
      };
    },
    check_time() {
      let time = (this.otherInfo.first_order_check_time - this.nowTime) * 1000;
      return time;
    },
    first_order_check_time_check() {
      if (this.otherInfo.first_order_check_time * 1000 <= Date.now()) {
        return false;
      }
      return true;
    },
    daysUntilDeadline() {
      const currentTime = Date.now(); // 当前时间的时间戳
      const deadlineTime = this.otherInfo.first_order_check_time * 1000; // 截止时间的时间戳，乘以1000转换为毫秒

      const timeDifference = deadlineTime - currentTime; // 时间差（毫秒）
      const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); // 转换为天数

      return daysDifference;
    }
  }
};
</script>
<style lang="scss" scoped>
.Internship_Guide {
  margin: 0 0.94rem;
  padding: 0.75rem 0.75rem 0.94rem 0.75rem;
  box-sizing: border-box;
  border-radius: 0.47rem;
  background: linear-gradient(180deg, #fce3e3 0%, rgba(241, 83, 83, 0) 4.06rem);
  background-color: #ffffff;
  .txt {
    font-weight: bold;
    font-size: 1.25rem;
    color: #333333;
  }
  .guidePoint {
    font-size: 0.81rem;
    color: #333333;
    margin-top: 0.94rem;
  }
  .btn {
    display: flex;
    justify-content: space-around;
    .btn_c {
      min-width: 9.38rem;
      height: 2.25rem;
      background: #f15353;
      border-radius: 1.13rem 1.13rem 1.13rem 1.13rem;
      font-weight: 500;
      font-size: 0.88rem;
      color: #ffffff;
      line-height: 2.25rem;
      text-align: center;
      margin: 0 auto;
    }
    .btn_b {
      background: #ffffff;
      border: 0.03rem solid #f15353;
      font-weight: 500;
      font-size: 0.88rem;
      color: #f15353;
    }
  }
  .task {
    display: flex;
    justify-content: space-between;
    .taskTag {
      font-size: 0.75rem;
      color: #333333;
      width: 6.34rem;
      height: 2.5rem;
      box-sizing: border-box;
      background: #f5f5f5;
      border-radius: 0.5rem;
      border: 0.03rem solid #aaaab3;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.78rem 0 0.94rem 0;
      .rightIcon {
        position: absolute;
        right: 0;
        top: 0;
        width: 1.13rem;
        height: 0.8rem;
        background: #aaaab3;
        border-radius: 0rem 0.4rem 0rem 0.38rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-icon_select1 {
          color: #ffffff;
          font-size: 0.6rem;
        }
      }
    }
    .selectTask {
      background: rgba(241, 83, 83, 0.06);
      border: 0.03rem solid #f15353;
      color: #f15353;
      .rightIcon {
        background: #f15353;
      }
    }
  }
  .guidePoint_time {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    color: #333333;
    margin-top: 0.4rem;
    .guidePoint_time_txt {
      margin-right: 0.25rem;
    }
    .block {
      font-size: 0.75rem;
      color: #333333;
    }

    .cr {
      font-size: 0.75rem;
      color: #f15353;
      padding: 0.19rem 0.22rem;
      box-sizing: border-box;
      border-radius: 0.38rem;
      background: #feeded;
      margin: 0 0.13rem;
    }
  }
}
.Sales_assessment {
  padding: 0.81rem 0.75rem 0.75rem 0.75rem;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.47rem;
  margin: 0 1rem;
  .Sales_assessment_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.81rem;
    border-bottom: 1px solid #e9e9e9;
    .Sales_assessment_top_l {
      font-weight: bold;
      font-size: 0.88rem;
      flex-shrink: 0;
    }
    .Sales_assessment_top_r {
      font-size: 0.75rem;
      color: #999999;
      flex: 1;
      text-align: right;
    }
  }

  .Sales_assessment_b {
    .Sales_assessment_b_line {
      width: 100%;
      height: 0.25rem;
      background: #e9e9e9;
      border-radius: 0.94rem;
      margin-top: 0.63rem;
      position: relative;
    }
    .schedule {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #f15353;
      border-radius: 0.94rem;
    }
    .Sales_assessment_b_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.4rem;
      .Sales_assessment_b_t_l {
        font-size: 0.75rem;
        color: #333333;
        text-align: left;
      }
      .Sales_assessment_b_t_r {
        font-size: 0.75rem;
        color: #f15353;
        background: rgba(241, 83, 83, 0.06);
        border-radius: 0.25rem;
        padding: 0.19rem 0.2rem;
        box-sizing: border-box;
        word-break: break-all;
        text-align: left;
      }
    }
  }
  .Sales_assessment_top:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}
</style>
